<template>
  <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="故障记录" name="1">
                <TestFault1 ref="TestFault1" :treeID="activeName"></TestFault1>
              </el-tab-pane>
              <el-tab-pane label="故障检测与诊断" name="2">
                <TestFault2 ref="TestFault2" :treeID="activeName" ></TestFault2>
              </el-tab-pane>
              <el-tab-pane label="故障跟踪处理记录" name="3">
                <TestFault4 ref="TestFault4" :treeID="activeName" ></TestFault4>
              </el-tab-pane>
              <!-- <el-tab-pane label="故障跟踪记录" name="4">
                <TestFault4 ref="TestFault4" :treeID="activeName" ></TestFault4>
              </el-tab-pane> -->
            </el-tabs>
  </div>
</template>
<script>
  import TestFault1 from "./components/TestFault1.vue";
  import TestFault2 from "./components/TestFault2.vue";
  import TestFault3 from "./components/TestFault3.vue";
  import TestFault4 from "./components/TestFault4.vue";
  export default {
    components: {
      TestFault1,
      TestFault2,
      TestFault3,
      TestFault4,
    },
    data () {
      return {
        activeName:null,
      }
    },
    mounted () {
      this.init();
    },
    methods: {
      init(){
        this.activeName = '1';
      },
      handleClick(event){
        //this.numName = event.label;
      },
      
        },
        template: "#template"
  }
</script>

<style>
  .tableTxt {
  width: calc(100% + 1px);
  cursor: pointer;
  display: flex;
  align-items: center;
}
.tableTxt div {
  width: 0px;
  flex: 1;
  font-weight: 700;
}
.tableTxt i {
  font-size: 28px;
  margin-right: 8px;
}
.tableTxt svg {
  width: 28px;
  height: 28px;
  margin-right: 8px;
}
  .tableTxtHoverBlue:hover div {
  color: #2c7ef8;
}
  .elscrollbar{
    overflow-x: hidden;

  }
  .tableToolbarText {
    font-weight: 600;
    font-size: 14px;
}
.tableToolbarTextL {
  margin-left: 8px;
}
.elLinkBTN {
  margin: 0 4px;
}
  .tableToolbar {
  display: flex;
  align-items: center;
}
.textHidden {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal_footer {
  width: 100%;
  margin: 10px auto;
  display: flex;
  justify-content: flex-end;
}
</style>